<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-model="props.viewVisible" title="模板详情" width="800" @close="cancel">
    <div class="data_detail">
      <el-form size="small" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务场景">
              <span>{{ formData.businessSceneName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="业务系统">
              <span>{{ formData.businessSystemName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="要素库类型">
              <span>{{ formData.databaseTypeName }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12" v-if="formData.databaseSubtype">
            <el-form-item label="要素库子类型">
              <span>{{ formData.databaseSubtype }}</span>
            </el-form-item>
          </el-col> -->
          
          <el-col :span="24">
            <el-form-item label="模板名称">
              <span>{{ formData.templateName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据模型">
              <span>{{ formData.configName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="模板描述">
              <div v-html="formData.templateDescription"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="table_data">
        <h3>数据模板字段：</h3>
        <div class="json-preview" id="previewContainer">
          <vue-json-pretty 
            :data="parsedData"
            :deep="5"
            :showLength="true"
            @click="handleClick"
          />
        </div>
        
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="cancel"> 取消 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="TemplateDetail" setup>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
import { getDatabaseTemplateDetail } from '@/api/system/template/index';
const props = defineProps(['viewVisible', 'row']);
const emit = defineEmits(['handleEvent']);
//tableList
const tableList = ref([]);
const formData = ref({});
const jsonOutputRef = ref();
// 取消
const cancel = () => {
  emit('handleEvent', {type: 'cancel'});
};
// 单个模板数据查询
const getSingleTemplateData = () => {
  getDatabaseTemplateDetail(props.row.id).then((res) => {
    formData.value = res.data;
    tableList.value = res.data?.isfdDatabaseModelConfigShowVo?.fieldList;
  })
}
// 解析 JSON 数据
const parsedData = computed(() => {
  try {
    return JSON.parse(formData.value.templateMapString)
  } catch (e) {
    console.error('JSON 解析错误:', e)
    return { error: '无效的 JSON 格式' }
  }
})

onMounted(async () => {
  props?.row?.id && getSingleTemplateData();
});
</script>
<style lang="scss" scoped>
.data_detail {
  font-size: 12px;
  .basic {
    .title {
      background: #fafafa;
      height: 20px;
      line-height: 20px;
      font-weight: 600;
    }
    .basic_item {
      margin-top: 10px;
      > span:nth-child(2) {
        color: #909399;
      }
    }
    .split {
      width: 100%;
      height: 1px;
      background: #f4f4f4;
      margin-top: 10px;
    }
    .rows {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .row_item {
        width: 33%;
        > span:nth-child(2) {
          color: #909399;
        }
      }
    }
  }
  .data_view {
    margin-top: 20px;
    .title {
      background: #fafafa;
      height: 20px;
      line-height: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      .view {
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .table_data {
    margin-top: 20px;
    .pagenation {
      display: flex;
      justify-content: end;
      margin-top: 10px;
    }
  }
}
.json-preview {
  position: relative;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #f8f9fa;
}
</style>
